<template>
  <!--  时间选择 、取货方式 -->
  <view>
    <u-navbar :autoBack="true" :placeholder="true" bgColor="#F8F9FE">
      <template #center>
        <view></view>
      </template>
    </u-navbar>
    <view class="title">{{ title }}</view>
    <view class="card rowItem" v-for="(item, index) in timeList" :key="index" @click="timeClick(index)">
      <view>
        <text @click.stop="openDateTimePickerHandler(index)" style="margin-right: 30rpx">{{ timeValueText || '点击这里选择日期' }}</text>
        <text>{{ item.Ztime }}</text>
      </view>
      <image v-if="item.flag" src="http://qiniu.suboshimuying.cn/static/cart/check.png" mode=""></image>
      <image v-else src="http://qiniu.suboshimuying.cn/static/order/icon24@2x.png" mode=""></image>
    </view>
    <view class="fixedBox">
      <view class="fixedBox-item cancel" @click="bacnkClick">取消</view>
      <view class="fixedBox-item" @click="btnClick">确定</view>
    </view>
    <u-datetime-picker :show="isChooseState" mode="date" @cancel="isChooseState = false" @confirm="confirmSelectDateHandler"></u-datetime-picker>
  </view>
</template>

<script>
import dayjs from 'dayjs'
export default {
  data() {
    return {
      title: '选择时间',
      timeList: [],
      timeIndex: 0, //选中time的索引
      type: null,
      userType: null,
      isChooseState: false,
      timeValueText: ''
    }
  },
  onLoad(option) {
    console.log(option)
    // 必传
    //type： 1:选择时间  2:取货方式
    //userType：1:商家 2:用户
    this.type = option.type
    this.userType = option.userType

    switch (option.type) {
      case '1':
        this.title = '选择时间'

        if (option.userType == '1') {
          this.timeList = [
            {
              flag: false,
              time: '8:00-9:00'
            },
            {
              flag: false,
              time: '9:00-10:00'
            },
            {
              flag: false,
              time: '10:00-11:00'
            },
            {
              flag: false,
              time: '11:00-12:00'
            },
            {
              flag: false,
              time: '12:00-13:00'
            },
            {
              flag: false,
              time: '13:00-14:00'
            },
            {
              flag: false,
              time: '14:00-15:00'
            },
            {
              flag: false,
              time: '15:00-16:00'
            }
          ]
        } else {
          let arrData = JSON.parse(option.timeList)
          this.timeList = arrData.map(item => ({
            flag: false,
            time: item,
            Ztime: item,
            timeValueText: ''
          }))
        }
        break
      case '2':
        this.title = '取货方式'
        break
      default:
        break
    }
    // 选中当前选择
    if (option.value) {
      let arr = option.value.split(',')
      arr.forEach(item => {
        this.timeList.forEach(item2 => {
          if (item === item2.time) item2.flag = true
        })
      })
    }
  },
  methods: {
    timeClick(index) {
      if (this.userType == '1') {
        //商家多选
        this.timeList[index].flag = !this.timeList[index].flag
      } else {
        // 用户单选
        if (!this.timeValueText.length) return uni.showToast({ title: '请先选择时间段', icon: 'none' })
        this.timeList.forEach(item => (item.flag = false))
        this.timeList[index].flag = true
        this.timeList[index].time = `${this.timeValueText} ${this.timeList[index].time}`
      }
    },
    bacnkClick() {
      uni.navigateBack({})
    },
    btnClick() {
      if (!this.timeValueText.length) return uni.showToast({ title: '请选择时间段', icon: 'none' })
      let backArr = this.timeList.filter(item => item.flag === true)
      if (backArr.length === 0) return uni.showToast({ title: '最少选择1个', icon: 'none' })
      // console.log(backArr);
      if (backArr.length <= 5) {
        const eventChannel = this.getOpenerEventChannel()
        eventChannel.emit('timeBack', backArr)
        uni.navigateBack({})
      } else {
        this.$u.toast('最多选择5个')
      }
    },
    openDateTimePickerHandler(index) {
      this.isChooseState = true
    },
    confirmSelectDateHandler(e) {
      const isAfterToday = dayjs().isAfter(dayjs(e.value).startOf('day'))

      // 2023-07-23 16:22:00
      console.log(e, '选择时间', dayjs(e.value).format('YYYY-MM-DD'))
      if (!isAfterToday) {
        this.isChooseState = false

        this.timeValueText = dayjs(e.value).format('YYYY-MM-DD')
      } else {
        uni.showToast({ title: '最少提前一天预约', icon: 'none' })
      }
    }
  }
}
</script>

<style>
page {
  box-sizing: border-box;
  padding: 0 24rpx 220rpx;
}
</style>
<style lang="scss" scoped>
.title {
  height: 56rpx;
  color: rgba(0, 0, 0, 0.9);
  font-size: 44rpx;
  font-weight: 700;
  line-height: 56rpx;
}

.rowItem {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: rgba(0, 0, 0, 0.8);
  font-size: 28rpx;
  font-weight: 500;

  image {
    width: 32rpx;
    height: 32rpx;
  }
}

.fixedBox {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 188rpx;
  background-color: #fff;
  display: flex;
  justify-content: space-around;
  align-items: center;
  text-align: right;
  box-sizing: border-box;
  padding: 0 32rpx 68rpx;

  &-item {
    width: 328rpx;
    height: 88rpx;
    border-radius: 44rpx;
    color: #fff;
    text-align: center;
    line-height: 88rpx;
    background: rgba(128, 110, 254, 1);
  }

  .cancel {
    color: #000000 !important;
    background: rgba(248, 249, 254, 1) !important;
  }
}
</style>
